<template>
    <div class="confirmOrderContainer">
        <section v-if="!showLoading">
            <head-top head-title="意见反馈" goBack="true" signin-up='confirmOrder'></head-top>
            
			<section class="pay_way container_style">
			    <header class="header_style">
			        <span>意见级别</span>
			        <div class="more_type" @click="showPlaylevelFun">
			            <span>{{level}}</span>
			            <svg class="address_empty_right">
			                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
			            </svg>
			        </div>
			    </header>
				
			</section>
            <section class="pay_way container_style">
                <header class="header_style">
                    <span>实名/匿名</span>
                    <div class="more_type" @click="showPayWayFun">
                        <span>{{isname}}<span v-if="isnametext">员工编号:{{name}}</span></span>
                        <svg class="address_empty_right">
                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
                        </svg>
                    </div>
                </header>
				
            </section>
			
			<section class="pay_way container_style">
			    <header class="header_style">
			        <span>意见类型</span>
			        <div class="more_type" @click="showtypeFun">
			            <span>{{type}}</span>
			            <svg class="address_empty_right">
			                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
			            </svg>
			        </div>
			    </header>
				
			</section>
			<section class="pay_way container_style">
			    <header class="header_style">
			        <span>接收人</span>
			        <div class="email" >
			            <input v-model="sendemail" type="text" placeholder="请输入邮箱号"/><span>@gree.com.cn</span>
			        </div>
			    </header>
				
			</section>
            <section class="pay_way container_style">
				<header class="header_style">
				    <span>意见内容</span>
				</header>
                <textarea class="text" placeholder="请输入" maxlength="500" @input="contentInput" v-model="content" />
                <span class="numberV">{{txtVal}}/500</span>
                
            </section>
            
            <section class="confrim_order">
                <p></p>
                <p @click="confrimOrder">确认提交</p>
            </section>
			<transition name="fade">
			    <div class="cover" v-if="showlevelWay" @click="showPlaylevelFun"></div>
			</transition>
			<transition name="slid_up">
			    <div class="choose_type_Container" v-if="showlevelWay">
			        <header>意见级别</header>
			        <ul>
			            <li v-for="item in levelOption" :key="item.id" :class="{choose: levelId == item.id}">
			                <span>{{item.levelname}}<span v-if="!item.is_online_payment">{{item.description}}</span></span>
			                <svg class="address_empty_right" @click="choosePayWay( item.id,item.levelname)">
			                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#select"></use>
			                </svg>
			            </li>
			        </ul>
			    </div>
			</transition>
			
            <transition name="fade">
                <div class="cover" v-if="showisnameWay" @click="showPayWayFun"></div>
            </transition>
            <transition name="slid_up">
                <div class="choose_type_Container" v-if="showisnameWay">
                    <header>实名/匿名</header>
                    <ul>
                        <li v-for="item in isnameOption" :key="item.id" :class="{choose: isnameId == item.id}">
                            <span>{{item.name}}<span v-if="item.isnametext"><input type="text" placeholder="请输入你的工号" v-model="name"/></span><span v-if="!item.isonlinepayment">{{item.description}}</span></span>
                            <svg class="address_empty_right" @click="chooseisnameWay(item.id,item.name,item.isnametext)">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#select"></use>
                            </svg>
                        </li>
                    </ul>
                </div>
            </transition>
			
			<transition name="fade">
			    <div class="cover" v-if="showtypeWay" @click="showtypeFun"></div>
			</transition>
			<transition name="slid_up">
			    <div class="choose_type_Container" v-if="showtypeWay" style="height: 90%;overflow: scroll;">
			        <header>意见类型</header>
			        <ul>
			            <li v-for="item in typeOption" :key="item.id" :class="{choose: typeId == item.id}">
			                <span>{{item.name}}：<span style="font-size: small;word-wrap:break-word;">{{item.description}}</span></span>
			                <svg class="address_empty_right" @click="choosetypeWay(item.id,item.name)">
			                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#select"></use>
			                </svg>
			            </li>
			        </ul>
			    </div>
			</transition>
			
        </section>
        <loading2 v-if="showLoading"></loading2>
        <alert-tip v-if="showAlert" @closeTip="showAlert = false" :alertText="alertText" :yurl="url"></alert-tip>
        <transition name="router-slid" mode="out-in">
            <router-view></router-view>
        </transition>
    </div>
</template>

<script>
    import {mapState, mapMutations} from 'vuex'
    import headTop from 'src/components/header/head'
    import alertTip from 'src/components/common/alertTip'
    import loading2 from 'src/components/common/loading2'
    import {checkout, getAddress, placeOrders, confirmsuggetion} from 'src/service/getData'
    import {imgBaseUrl} from 'src/config/env'

    export default {
        data(){
            return {
                geohash: '', //geohash位置信息
                shopId: null, //商店id值
                showLoading: false, //显示加载动画
                checkoutData: null,//数据返回值
                shopCart: null,//购物车数据
                imgBaseUrl, //图片域名
                showPayWay: false,//显示付款方式
                payWayId: 1, //付款方式
                showAlert: false, //弹出框
                alertText: null, //弹出框内容
				url:'666666',
				showPlayWay:false,//显示堂食/外送方式
				showlevelWay:false,
				payments:'',
				content:'',
				txtVal: 0,
				level:'公司',
				isname:'实名',
				levelOption:[{id:'1',levelcode:'01',levelname:'公司'},{id:'2',levelcode:'02',levelname:'部门'}],
				isnameOption:[{id:'1',code:'01',name:'实名',isnametext:true},{id:'2',code:'02',name:'匿名',isnametext:false}],
				levelId:1,
				showisnameWay:false,
				isnameId:1,
				type:'请选择',
				typeOption:[
					{id:'1',code:'01',name:'管理--管理制度',description:'对公司或者部门管理制度中某些条款提出意见或建议'},
					{id:'2',code:'02',name:'管理--管理者方法',description:'对公司领导、部门领导、直接上级领导的管理方式提出意见或者建议'},
					{id:'3',code:'03',name:'管理--项目管理',description:'对公司或者部门项目管理方式方法提出意见；对项目开发过程，与项目管理相关的意见或者建议反馈'},
					{id:'4',code:'04',name:'管理--质量管理',description:'对公司或部门质量管理方式方法提出意见，对开发工作当中，与质量管理相关的意见或建议反馈'},
					{id:'5',code:'05',name:'后勤--办公办法',description:'对办公环境提出意见或建议'},
					{id:'6',code:'06',name:'后勤--交通',description:'对公司提供的交通工具（班车）情况提出意见或建议'},
					{id:'7',code:'07',name:'后勤--住宿',description:'对公司提供的住宿情况提出意见或建议'},
					{id:'8',code:'08',name:'后勤--餐饮',description:'对公司提供的餐饮服务情况提出意见或建议'},
					{id:'9',code:'09',name:'团建--公司级',description:'对公司团建活动、氛围等方面提出意见或建议'},
					{id:'10',code:'10',name:'团建--部门级',description:'对部门团建活动、氛围等方面提出意见或建议'},
					{id:'11',code:'11',name:'团建--科室级',description:'对科室团建活动、氛围等方面提出意见或建议'},
					{id:'12',code:'12',name:'开发--创意产品',description:'创意产品、功能意见反馈'},
					{id:'13',code:'13',name:'开发--设计思路',description:'在产品设计研发当中，一些想法或建议反馈'},
					{id:'14',code:'14',name:'开发--经验总结分享',description:'在工作当中，自己总结沉淀的一些经验分享'},
					{id:'15',code:'15',name:'其他--自定义',description:'自行描述'},
					],
				showtypeWay:false,
				name:'',
				isnametext:true,
				sendemail:''
				
            }
        },
        created(){
            
        },
        mounted(){
            
        },
        components: {
            headTop,
            alertTip,
            loading2,
        },
        computed: {
            ...mapState([
                'cartList', 'remarkText', 'inputText', 'invoice', 'choosedAddress', 'userInfo'
            ]),
            //备注页返回的信息进行处理
            remarklist: function (){
                let str = new String;
                if (this.remarkText) {
                    Object.values(this.remarkText).forEach(item => {
                        str += item[1] + '，';
                    })
                }
                //是否有自定义备注，分开处理
                if (this.inputText) {
                    return str + this.inputText;
                }else{
                    return str.substr(0, str.lastIndexOf('，')) ;
                }
            },
        },
        methods: {
            ...mapMutations([
                'INIT_BUYCART', 'SAVE_GEOHASH', 'CHOOSE_ADDRESS', 'NEED_VALIDATION', 'SAVE_CART_ID_SIG', 'SAVE_ORDER_PARAM', 'ORDER_SUCCESS', 'SAVE_SHOPID'
            ]),
            //初始化数据
            async initData(){
                let newArr = new Array;
                Object.values(this.shopCart).forEach(categoryItem => {
                    Object.values(categoryItem).forEach(itemValue=> {
                        Object.values(itemValue).forEach(item => {
                            newArr.push({
                                attrs: [],
                                extra: {},
                                id: item.id,
                                name: item.name,
                                packing_fee: item.packing_fee,
                                price: item.price,
                                quantity: item.num,
                                sku_id: item.sku_id,
                                specs: [item.specs],
                                stock: item.stock,
                            })
                        })
                    })
                })
                //检验订单是否满足条件
				// alert(this.shopId);
                this.checkoutData = await checkout(this.geohash, [newArr], this.shopId);
                this.SAVE_CART_ID_SIG({cart_id: this.checkoutData.cart.id, sig:  this.checkoutData.sig})
                this.initAddress();
                this.showLoading = false;
				this.payments="在线支付";
            },
            //获取地址信息，第一个地址为默认选择地址
            contentInput(){
			  this.txtVal = this.content.length;
			},
			//显示堂食/外送方式
			showPlaylevelFun(){
			    this.showlevelWay = !this.showlevelWay;
			},
            //显示付款方式
            showPayWayFun(){
                this.showisnameWay = !this.showisnameWay;
            },
			showtypeFun(){
			    this.showtypeWay = !this.showtypeWay;
			},
            //选择付款方式
            choosePayWay(id,name){
                    this.showlevelWay = !this.showlevelWay;
                    this.levelId = id;
					this.level=name;
            },
			chooseisnameWay(id,name,isnametext){
				
                    this.showisnameWay = !this.showisnameWay;
                    this.isnameId = id;
					this.isname=name;
					this.isnametext=isnametext;
            },
			choosetypeWay(id,name){
				
			        this.showtypeWay = !this.showtypeWay;
			        this.typeId = id;
					this.type=name;
			},
            //地址备注颜色
            iconColor(name){
                switch(name){
                    case '公司': return '#4cd964';
                    case '学校': return '#3190e8';
                }
            },
            //确认订单
            async confrimOrder(){
				if(!this.level){
					this.showAlert = true;
					this.alertText = '请选择意见级别';
					return
				}else if(this.isname=='实名'&&(this.name.trim()=="")){
					this.showAlert = true;
					this.alertText = '实名请输入工号';
					return
				}else if(this.type=='请选择'){
					this.showAlert = true;
					this.alertText = '请选择意见类型';
					return
				}else if(this.sendemail.trim()==''){
					this.showAlert = true;
					this.alertText = '请输入接收邮箱号';
					return
				}else if(this.content.trim()==''){
					this.showAlert = true;
					this.alertText = '请输入意见内容';
					return
				}
				// this.showLoading=true;
                let rep=await confirmsuggetion(this.level,this.isname,this.name,this.type,this.sendemail,this.content)
				
				if(rep.ok){
					// this.showAlert = true;
					// this.alertText = '提交成功';
					// this.showLoading=false;
					this.$router.push('/reslut');
					
				}
            },
        },
        watch: {
            userInfo: function (value) {
                if (value && value.user_id) {
                    this.initAddress();
                }
            },
        }
    }

</script>

<style lang="scss" scoped>
    @import 'src/style/mixin';

    .confirmOrderContainer{
        padding-top: 1.95rem;
        padding-bottom: 3rem;
        p, span{
            font-family: Helvetica Neue,Tahoma,Arial;
        }
    }
    .container_style{
        background-color: #fff;
        margin-top: .4rem;
        padding: 0 .7rem;
    }
    .address_container{
        min-height: 3.5rem;
        @include fj;
        align-items: center;
        padding: 0 0.6rem;
        background: url(../../images/address_bottom.png) left bottom repeat-x;
        background-color: #fff;
        background-size: auto .12rem;
        .address_empty_left{
            display: flex;
            align-items: center;
            .location_icon{
                @include wh(.8rem, .8rem);
                fill: $blue;
                margin-right: .2rem;
            }
            .add_address{
                @include sc(.7rem, #333);
            }
            .address_detail_container{
                margin-left: .2rem;
                header{
                    @include sc(.65rem, #333);
                    span:nth-of-type(1){
                        font-size: .8rem;
                        font-weight: bold;
                    }
                }
                .address_detail{
                    width: 100%;
                    display: flex;
                    align-items: center;
                    span{
                        @include sc(.5rem, #fff);
                        border-radius: .15rem;
                        background-color: #ff5722;
                        height: .6rem;
                        line-height: .6rem;
                        padding: 0 .2rem;
                        margin-right: .3rem;
                    }
                    p{
                        @include sc(.55rem, #777);
                    }
                }
            }
        }
    }
    .address_empty_right{
        @include wh(.6rem, .6rem);
        fill: #999;
    }
    .delivery_model{
        border-left: .2rem solid $blue;
        min-height: 4rem;
        @include fj;
        align-items: center;
        .deliver_text{
            @include sc(.8rem, #333);
            font-weight: bold;
            padding-left: .3rem;
        }
        .deliver_time{
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            p:nth-of-type(1){
                @include sc(.7rem, $blue);
            }
            p:nth-of-type(2){
                @include sc(.5rem, #fff);
                background-color: $blue;
                width: 2.4rem;
                margin-top: .5rem;
                text-align: center;
                border-radius: 0.12rem;
                padding: .1rem;
            }
        }
    }
    .pay_way{
        .header_style{
            @include fj;
            line-height: 2rem;
            span:nth-of-type(1){
                @include sc(.7rem, #666);
            }
            .more_type{
                span:nth-of-type(1){
                    @include sc(.6rem, #aaa);
                    width: 10rem;
                    display: inline-block;
                    text-align: right;
                    vertical-align: middle;
                }
                svg{
                    @include wh(.5rem, .5rem);
                    fill: #ccc;
                }
            }
        }
        .hongbo{
            @include fj;
            border-top: 0.025rem solid #f5f5f5;
            span{
                @include sc(.6rem, #aaa);
                line-height: 2rem;
                svg{
                    @include wh(.5rem, .5rem);
                    vertical-align: middle;
                    fill: #ccc;
                }
            }
            span:nth-of-type(2){
                color: #aaa;
            }
        }
        .support_is_available{
            span{
                color: #666;
            }
        }
    }
    .food_list{
        background-color: #fff;
        margin-top: .4rem;
        header{
            padding: .7rem;
            border-bottom: 0.025rem solid #f5f5f5;
            img{
                @include wh(1.2rem, 1.2rem);
                vertical-align: middle;
            }
            span{
                @include sc(.8rem, #333);
            }
        }
        .food_list_ul{
            padding-top: .5rem;
        }
        .food_item_style{
            @include fj;
            line-height: 1.8rem;
            padding: 0 .7rem;
            span,p{
                @include sc(.65rem, #666);
            }
            .food_name{
                width: 11rem;
            }
            .num_price{
                flex: 1;
                @include fj;
                align-items: center;
                span:nth-of-type(1){
                    color: #f60;
                }
            }
        }
        .total_price{
            border-top: 0.025rem solid #f5f5f5;
        }
    }
    .confrim_order{
        display: flex;
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 2rem;
        p{
            line-height: 2rem;
            @include sc(.75rem, #fff);
        }
        p:nth-of-type(1){
            background-color: #3c3c3c;
            flex: 5;
            padding-left: .7rem;
        }
        p:nth-of-type(2){
            flex: 2;
            background-color: #56d176;
            text-align: center;
        }
    }
    .cover{
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(0,0,0,.3);
        z-index: 203;
    }
    .choose_type_Container{
        min-height: 10rem;
        background-color: #fff;
        position: fixed;
        bottom: 0;
        width: 100%;
        z-index: 204;
        header{
            background-color: #fafafa;
            @include sc(.7rem, #333);
            text-align: center;
            line-height: 2rem;
        }
        ul{
            li{
                @include fj;
                padding: 0 .7rem;
                line-height: 2.5rem;
                align-items: center;
                span{
                    @include sc(.7rem, #ccc);
                }
                svg{
                    @include wh(.8rem, .8rem);
                    fill: #eee;
                }
            }
            .choose{
                span{
                    color: #333;
                }
                svg{
                    fill: #4cd964;
                }
            }
        }
    }
    .fade-enter-active, .fade-leave-active {
        transition: opacity .3s;
    }
    .fade-enter, .fade-leave-active {
        opacity: 0;
    }
    .slid_up-enter-active, .slid_up-leave-active {
        transition: all .3s;
    }
    .slid_up-enter, .slid_up-leave-active {
        transform: translate3d(0,10rem,0)
    }
    .router-slid-enter-active, .router-slid-leave-active {
        transition: all .4s;
    }
    .router-slid-enter, .router-slid-leave-active {
        transform: translate3d(2rem, 0, 0);
        opacity: 0;
    }
	.text {
        display: block;
        width: 97%;
        border: 0;
        margin-left: 5px;
		margin-right: 5px;
        font-size: 15px;
        outline: none;
        border-radius: 5px;
        padding: 14px;
        background-color: #FAFAFA;
        word-break: break-all;
        min-height: 130px;
    }
    .numberV {
        color: #ccc;
		font-size: 0.3em
    }
</style>
